<template>
    <div>
        <div id="top">
            <van-icon id="icon" name="checked" /><span class="wen">30天无忧退货 </span>
            <van-icon id="icon" name="checked" /><span class="wen">48小时快速退费 </span>
            <van-icon id="icon" name="checked" /><span class="wen">满88元免邮费 </span>
        </div>
        <!-- 没有商品的图片:) -->
        <div v-if="!chang" style="width: 200px; color: #aaa; text-align: center; position:absolute; top: 25%; left:25%;">
            <van-icon size=200px name="bulb-o" /><br>
            <span>暂无商品</span>
        </div>
        <!-- 有商品的盒子 -->
        <div v-if="chang" id="sphz">
            <div v-for="(item, index) in cartList" :key="index"
                style="display: flex; background-color: white; padding: 10px;">
                <!-- <input shape="r" type="checkbox" @click="xuanzhong(index)"> -->
                <van-checkbox v-if="jinyong==0" v-model=item.checked  @click=xuanzhong(item.checked,item.product_id)></van-checkbox>
                <van-checkbox v-if="jinyong==1" disabled  v-model=item.checked @click=xuanzhong(item.checked,item.product_id)>
                  
                </van-checkbox>
                <van-swipe-cell style="flex:1; background-color: #efefef;">
                    <div style="display:flex">
                        <img width="100" :src="item.list_pic_url" alt="">
                        <div style="flex:1;">
                            <p>{{ item.goods_name }}</p>
                            <div style="display:flex;justify-content: space-between;">
                                <p>{{ item.market_price | xiaoshu(2) }}</p>
                                <!-- 步进器 -->
                                <van-stepper v-if="jinyong==1" id="bujinqi" @change="bujinqi(item.goods_id,item.number,item.id,item.product_id)"  v-model= item.number />


                                <span style="margin-top: 20px; margin-right: 10px; font-size: 12px; color: #aaa;">x{{
                                    item.number }}</span>
                                  
                            </div>
                        </div>
                    </div>                                                  




                    <template #right>
                        <van-button @click="shanchu(item.product_id)" square text="删除" type="danger" class="delete-button" />
                    </template>
                </van-swipe-cell>
            </div>
        </div>
        <van-submit-bar id="gm" :price="checkedGoodsAmount * num" button-text="立即购买">
            <van-checkbox v-if="jinyong==0" v-model="allStatus" @click="quanxuan(allStatus)">全选</van-checkbox>
            <van-checkbox v-if="jinyong==1" disabled v-model="allStatus" @click="quanxuan(allStatus)">全选</van-checkbox>
            <template #tip>
                累计共0件商品，可点击
                <van-button @click="anniu" :type="an" size="small">{{ wen }}</van-button>
                按钮进行商品数量修改
            </template>
        </van-submit-bar>
        <v-slot></v-slot>
    </div>
</template>


<script>

import vSlot from '../components/dibu.vue'
import { Getgowu, Getxuan ,Getbujinqi,Getshan} from "../request/app.js"
export default {
    data() {
        return {
            checked: 0,
            an: "primary",
            wen: "编辑",
            chang: 0,
            cartList: [],
            checkedGoodsAmount: 0,
            num: 100,
            jinyong:0,
            value:1
        };
    },
    components:{
        vSlot

    },
    methods: {
        anniu() {
            if (this.an == "primary") {
                this.an = "danger"
                this.wen = "完成编辑"
            this.jinyong = 1

            } else {
                this.an = "primary"
                this.wen = "编辑"
            this.jinyong = 0

            }
        },
        xuanzhong(checked, id) {
            if (checked) {
                checked = 1
                let ids = String(id)
                // console.log(checked,ids);
                Getxuan(checked, ids).then(res => {
                    // console.log(res);
                    this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount


                })
            } else {
                checked = 0
                let ids = String(id)
                // console.log(checked,ids);
                Getxuan(checked, ids).then(res => {
                    // console.log(res);
                    this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount


                })
            }
        },
        quanxuan(allStatus) {
            if (allStatus==false) {
                // console.log(1);
                let ids = ""
                this.cartList.forEach(item => {
                    ids += item.product_id + ","
                    // console.log(ids); 
                    Getxuan(1, ids).then(res => {
                        // console.log(res);
                        this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount


                    })
                    return item.checked = 1
                })
            } else {
                // console.log(0);
                let ids = ""
                this.cartList.forEach(item => {
                    ids += item.product_id + ","
                    // console.log(ids); 
                    Getxuan(0, ids).then(res => {
                        // console.log(res);
                        this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount


                    })
                    return item.checked = 0
                })
            }
        },
        bujinqi(id,number,ids,idss){
            // console.log(1);5
            // console.log(id);
            // console.log(number);
            Getbujinqi(id,number,ids,idss).then(res=>{

                // console.log(res);
                this.cartList = res.data.cartList
                this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount

            })
        },
        shanchu(ids){
            let idss = String(ids)
            Getshan(idss).then(res=>{

                console.log(res);
                this.cartList = res.data.cartList
                this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount

            })
        }
    },
    created() {
        Getgowu().then(res => {
            console.log(res);
            this.chang = res.data.cartList.length
            this.cartList = res.data.cartList
            this.checkedGoodsAmount = res.data.cartTotal.checkedGoodsAmount
        })
    },
    filters: {
        xiaoshu: function (a, b) {
            return a.toFixed(b)
        },
    },
    computed: {
        allStatus: {
            get() {
                let allStatus = this.cartList.every((item) => {
                    return item.checked;
                })
                return allStatus;
            },
            set(newValue) {
                return newValue;
            },
        }
    },
};
</script>


<style lang="less" scoped>
#icon {
    font-size: 15px;
    color: #8B0000;
    line-height: 30px;
}


#top {
    width: 100%;
    height: 30px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}


.wen {
    font-size: 10px;
    line-height: 30px;
}


.goods-card {
    margin: 0;
    background-color: white;
}


.delete-button {
    height: 100%;
}
#gm{
    margin-bottom: 50px;
}
#sphz{
    margin-bottom: 150px;
    height: 100%;
}
</style>